<template>
  <Row :gutter="30">
    <i-col :span="6"
      v-for="(item, i) in stationVideoStreamUrl"
      :key="`item-${i}`"
      style="padding-bottom:30px;">
      <Card class="monitor-card" :bordered="false">
        <p slot="title">{{item.title}}</p>
        <Tag slot="extra" v-if="item.pushing" type="dot" color="success">推流中</Tag>
        <Tag slot="extra" v-else type="dot" color="warning">未推流</Tag>
        <div class="vid" @dblclick="handleVideo(item)">
          <img v-if="item.preview" :src="item.preview" width="100%" height="100%"/>
        </div>
      </Card>
    </i-col>
  </Row>
</template>

<script>
import {mapState, mapActions} from 'vuex'

export default {
  computed: {
    ...mapState(['stationVideoStreamUrl'])
  },
  methods: {
    ...mapActions([
      'onloadVideoStreamPlayer'
    ]),
    handleVideo(videoinfo) {
      console.log('加载视频流详情页面：', videoinfo)
      let pullParams = {
        station: videoinfo.station,
        channel: videoinfo.channel
      }
      this.onloadVideoStreamPlayer(pullParams)
    }
  }
};
</script>

<style lang="less">
.vid {
  // background-color: yellowgreen;
  background: url(../../assets/default_poster.png) no-repeat center;
  background-size: 200% 200%;
  height: 20vh;
  width: 100%;
}
.monitor-card .ivu-card-head {
  padding: 4px 10px;
  border-bottom: 1px solid #13a4c2;
  background-color: #13a4c2 !important;
  height: 60px;
}
.monitor-card .ivu-card-head p {
  font-size: 2.6rem;
  height: 50px;
  line-height: 50px;
  color: #fff;
  text-align: left;
}
.monitor-card .ivu-card-body {
  padding: 0px;
}
</style>
